<template>
  <!-- 大客户项目跟进管理->客户跟进记录 -->
  <div>
    <!-- 搜索 -->
    <TopFilter :list="topFilterInit" :cols="3" labelWidth="110" @filterChange="changeHandle" @onCollapse="collapseHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :isSelectColumn="isSelectColumn"
      :params="fetchParams"
      :datakey="'records'"
      columnsRef="customerManage_continueManage_record_indexoem_01"
      :onColumnsChange="columns => (this.columns = columns)"
    ></FilterTable>
    <Drawer ref="infoDrawer" :visible.sync="visibleDrawer" title="客户跟进计划" :width="920" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <info-modal v-model="infoId" :infoType="type" :rowData="formData" @close="infoClose" />
    </Drawer>
    <!-- 经销商弹窗 -->
    <BaseDialog title="经销商查询" :visible.sync="visibleDealer" width="1000px" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <dealerMadal selectType="multiple" v-model="initDealerData" ref="dealerDialog" @close="closeDealer" />
    </BaseDialog>
  </div>
</template>
<script>
import dealerMadal from '@/pages/cms-common/dealerdata';
import { propertyList } from '@/api/cms-api/customerManage/continueManage/record/index';
import infoModal from './show';
import { dictionary } from '@/utils/dictMixin';
import { region } from '@/api/cms-common/region';
import { formatdateByDay } from '@/utils/index';
export default {
  mixins: [dictionary, region],
  components: {
    infoModal,
    dealerMadal
  },

  data() {
    return {
      visibleDrawer: false,
      isSelectColumn: false,
      visibleDealer: false,
      fetchApi: propertyList, //ipa 接口
      dealerCodes: '',
      topFilterInit: this.topFilterInitFun(),
      infoId: '', //记录行id
      type: 'add', //add编辑 ，info详情
      flterValue: {}, //参数
      columns: this.creatHeader(),
      fetchParams: {},
      formData: {}
    };
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.initProvince();
  },
  methods: {
    //初始化所在省份
    initProvince() {
      let pl = this.createRegionList();
      console.log(pl);
      this.topFilterInit[3].itemList = pl;
    },
    formatDates: function(value) {
      // 这里的 value 就是需要过滤的数据
      if (value == null || value == '') {
        return '';
      }
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      return year + '-' + month + '-' + day;
    },
    //搜索数据
    topFilterInitFun() {
      return [
        { type: 'INPUT', label: '客户公司名称', fieldName: 'customerName', placeholder: '请输入', initialValue: '' },
        { type: 'SELECT', label: '客户类型', fieldName: 'customerType', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2506') },
        { type: 'SELECT', label: '客户性质', fieldName: 'customerProperty', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2534') },
        {
          type: 'SELECT',
          label: '省份',
          fieldName: 'customerProvince',
          placeholder: '请选择',
          initialValue: '',
          itemList: []
        },
        {
          type: 'INPUT',
          label: '经销商',
          fieldName: 'dealerName',
          placeholder: '请选择',
          initialValue: '',
          readonly: true,
          unitRender: () => {
            return (
              <div>
                <el-button slot="append" icon="el-icon-search" onClick={() => this.openDialog()}></el-button>
                <el-button slot="append" icon="el-icon-delete" onClick={() => this.clearSelectDealer()}></el-button>
              </div>
            );
          }
        },
        { type: 'SELECT', label: '客户状态', fieldName: 'customerStatus', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2507') },
        { type: 'INPUT', label: '项目名称', fieldName: 'projectName', placeholder: '请输入', initialValue: '' },
        {
          type: 'RANGE_DATE',
          label: '预计下次跟进日期',
          fieldName: 'planDate',
          valueFormat: 'yyyy-MM-dd', //返回数据格式
          initialValue: '',
          placeholder: '请选择'
        },
        {
          type: 'RANGE_DATE',
          label: '实际跟进日期',
          fieldName: 'followDate',
          valueFormat: 'yyyy-MM-dd', //返回数据格式
          initialValue: '',
          placeholder: '请选择'
        },
        { type: 'SELECT', label: '项目跟进状态', fieldName: 'projectFollowUpStatus', placeholder: '请选择', initialValue: '', itemList: this.createDictList('2581') }
        //项目生效日期和保护期到期日
        // { type: 'RANGE_DATE', label: '项目生效期', fieldName: 'projectDate', placeholder: '请选择', initialValue: '' },
      ];
    },
    //搜索获取数据
    changeHandle(val) {
      console.log(val);
      console.log(val.planDate);
      var time = val.planDate;
      var time1 = val.followDate;
      val = Object.assign({}, { planDateStart: formatdateByDay(time[0]) }, val);
      val = Object.assign({}, { planDateEnd: formatdateByDay(time[1]) }, val);
      val = Object.assign({}, { followDateStart: formatdateByDay(time1[0]) }, val);
      val = Object.assign({}, { followDateEnd: formatdateByDay(time1[1]) }, val);
      val = Object.assign({}, val, { dealerCodes: this.dealerCodes });
      if (val.dealerName == '') {
        this.dealerCodes = '';
      }
      console.log(val);
      if (val.projectDate) {
        val.searchProjectStartDate = val.projectDate[0];
        val.searchProjectEndDate = val.projectDate[1];
      } else {
        val.projectStartDate = null;
        val.projectEndDate = null;
      }
      this.fetchParams = Object.assign({}, val, { xhrAbort: false });
      //this.fetchParams = val;
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 100,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row)}>
                  详情
                </el-button>
              </div>
            );
          }
        },
        {
          title: '项目跟进状态',
          dataIndex: 'projectFollowUpStatus',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.projectFollowUpStatus, '2581')}</span>;
          }
        },
        { title: '项目名称', dataIndex: 'projectName', sorter: true },
        { title: '客户公司名称', dataIndex: 'customerName', sorter: true },
        {
          title: '客户类型',
          dataIndex: 'customerType',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.customerType, '2506')}</span>;
          }
        },
        {
          title: '客户性质',
          dataIndex: 'customerProperty',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.customerProperty, '2534')}</span>;
          }
        },
        { title: '事业部', dataIndex: 'majorManagerId', 
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.majorManagerId, '2566')}</span>;
          },
        
        sorter: true },
        { title: '经销商', dataIndex: 'dealerName', sorter: true },
        {
          title: '所在省',
          dataIndex: 'customerProvince',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createRegionText(props.row.customerProvince)}</span>;
          }
        },
        {
          title: '所在市',
          dataIndex: 'customerCity',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createRegionText(props.row.customerCity)}</span>;
          }
        },
        {
          title: '所在县/区',
          dataIndex: 'customerDistrict',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createRegionText(props.row.customerDistrict)}</span>;
          }
        },
        { title: '详细地址', dataIndex: 'customerAddress', sorter: true },
        {
          title: '客户状态',
          dataIndex: 'customerStatus',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.customerStatus, '2507')}</span>;
          }
        },
        {
          title: '客户来源',
          dataIndex: 'customerSource',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.customerSource, '2508')}</span>;
          }
        },
        { title: '成交机会率(%)', dataIndex: 'dealRate', sorter: true },
        {
          title: '预计下次跟进时间',
          dataIndex: 'planDate',
          sorter: true,
          render: props => {
            return <span>{formatdateByDay(props.row.planNextDate)} </span>;
          }
        },
        {
          title: '实际跟进时间',
          dataIndex: 'followDate',
          sorter: true,
          render: props => {
            return <span>{formatdateByDay(props.row.followDate)} </span>;
          }
        },
        {
          title: '实际跟进方式',
          dataIndex: 'followType',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.followType, '2519')}</span>;
          }
        },
        { title: '跟进人', dataIndex: 'followPeople', sorter: true },
        {
          title: '跟进状态',
          dataIndex: 'followStatus',
          sorter: true,
          render: props => {
            //编码转汉字
            return <span>{this.createDictText(props.row.followStatus, '2520')}</span>;
          }
        },
        {
          title: '项目生效日期',
          dataIndex: 'projectStartDate',
          sorter: true,
          render: props => {
            return <span>{formatdateByDay(props.row.projectStartDate)} </span>;
          }
        },
        {
          title: '保护期到期日',
          dataIndex: 'projectEndDate',
          sorter: true,
          render: props => {
            return <span>{formatdateByDay(props.row.projectEndDate)} </span>;
          }
        }
      ];
    },

    clearSelectDealer() {
      this.topFilterInit.find(item => item.fieldName === 'dealerName').initialValue = '';
      this.dealerCode = '';
      this.dealerName = '';
    },
    //打开经销商弹窗
    openDialog() {
      this.initDealerData = {
        excludeBigCustomer: false, //是否查询大客户经销商，如果查询 true，不查询 false
        id: 1001
      };
      this.visibleDealer = true;
    },
    //经销商窗口关闭，返回数据
    closeDealer(data) {
      if (data.data && data.data.length > 0) {
        //清空数据内容
        // this.dealerCodes = [];
        // this.dealerNames = [];
        let dealerCodes = [];
        let dealerNames = [];

        //循环返回数据
        data.data.forEach(x => {
          dealerCodes.push(x.dealerCode);
          dealerNames.push(x.dealerName);
        });

        this.topFilterInit.find(item => item.fieldName === 'dealerName').initialValue = dealerNames.join(',');
        this.dealerCodes = dealerCodes.join(',');

        // data.data.forEach(x => {
        //   //插入经销商id
        //   // this.dealerList.push(x.dealerId);
        //   //使用逗号分隔拼接经销商ID
        //    x.dealerCode = "'" + x.dealerCode + "'";
        //   if (this.dealerCode == '') {
        //     this.dealerCode = x.dealerCode;
        //   } else {
        //     this.dealerCode += ',' + x.dealerCode;
        //   }

        //   // this.dealerList.push(x.dealerId);
        //   //使用逗号分隔拼接经销商名称
        //   if (this.dealerName == '') {
        //     this.dealerName = x.dealerName;
        //   } else {
        //     this.dealerName += ',' + x.dealerName;
        //   }
        // });
        // this.topFilterInit[4].initialValue = this.dealerName;
      }
      this.visibleDealer = data.visible; //关闭弹窗
    },
    //详情
    detailHandle(row) {
      //逻辑自己写
      this.visibleDrawer = true;
      this.formData = row;
      // this.infoId = 1000;
      // this.type = 'info';
    },
    //关闭详情
    infoClose() {
      this.visibleDrawer = false;
      // if (type === 'refresh') {
      // 重新加载
      this.fetchParams = { ...this.fetchParams };
      // }
    }
    // dealerHandle() {
    //   this.visibleDealer = true;
    // },
    // closeDealer(data) {
    //   this.visibleDealer = data.visible;
    //   this.topFilterInit[8].initialValue = '经销商名';
    // }
  }
};
</script>

<style lang="less" scoped></style>
